<template>
	<div style="height: 100%;">
		<common-header></common-header>
		<el-container style="height:100%;">
			<el-menu
				class="el-menu-vertical-demo"
				:default-active="selectIndex"
				@open="handleOpen"
				@close="handleClose"
				:collapse="isCollapse"
			>
				<el-submenu  index="1" v-for="(item,index) in data" :key="index">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>{{item.name}}</span>
					</template>
					<el-menu-item-group>
						<div v-for="(itemList,indexList) in item.list" :key="indexList">
							<el-menu-item :index="index+1+'-'+parseInt(indexList+1)" @click="skipClick(itemList.path,itemList.params)">
								<el-badge :value="itemList.count" class="item">{{itemList.name}}</el-badge>
							</el-menu-item>
						</div>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
			<el-main class="user-main">
				<router-view />
			</el-main>
		</el-container>

	</div>
</template>

<script>
import CommonHeader from "../components/common-header.vue";
export default {
	name: "index",
	data() {
		return {
			isHomePage: false,
			isSystemManage: false,
			isCollapse: false, //是否拉开
			btnIndex: "",
			menuList: "",
			selectIndex: "1-1",
			data:[
				{
					name:'基础功能',
					list:[]
				},
				{
					name:'流程查询',
					list:[
						{
							name:"我发起的",
							path:"search",
							params:{"EnsName":"BP.WF.Data.MyStartFlows"}
						},
						{
							name:"节点信息",
							path:"enOnly",
							params:{"EnName":"BP.WF.Template.NodeExt","PKVal":201}
						}
					]

				}
			]
		};
	},

	created() {
		var handler = new this.HttpHandler("BP.WF.HttpHandler.WF_AppClassic");
		var data = handler.DoMethodReturnString("Home_Init");
		if (data.indexOf('err@') == 0) {
			this.$message.error(data);
			console.log(data);
			return;
		}
		data = JSON.parse(data);
		this.data[0].list.push({
			name:'流程发起',
			path:'start'
		});
		this.data[0].list.push({
			name:'待办',
			path:'todolist',
			count:data.Todolist_EmpWorks
		});
		this.data[0].list.push({
			name:'在途',
			path:'runing',
			count:data.Todolist_Runing
		});
		this.data[0].list.push({
			name:'已完成',
			path:'complete',
			count:data.Todolist_Complete
		});

	},

	methods: {
		// 跳转页面
		skipClick(path,params){
			if(params!=null&&params!=undefined)
				this.$store.commit('setData', params);
			this.$router.push({name:path});
		},

		handleOpen(){

		},
		handleClose(){
			
		}

	},
	components: {
		CommonHeader
	},

	//监听
	computed: {},

	//监听后执行动作
	watch: {}
};
</script>

<style lang="less" scoped>
.el-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding-top: 56px;
	background: #fff;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	min-height: 400px;
	background: #f6f9ff !important;
	border: none;
	.el-menu-item {
		color: #000;
		.list-icon {
			display: inline-block;
			width: 30px;
			height: 30px;
			margin-bottom: 3px;
		}
		&:hover {
			background: rgba(226, 240, 255, 1);
		}
		&.is-active {
			background: #00dfb9;
			span {
				color: #fff;
			}
		}
	}
}


/deep/ .el-menu{
	background: #f6f9ff;
	border:0;
}


/deep/ .el-badge__content {
	top: 25px !important;
	right: 45px !important;
}

//更改element 一些默认样式
/deep/.el-menu--popup,
.el-menu--popup-right-start,
.el-menu-item-group {
	background: #f6f9ff !important;
	padding: none;
	border: none;
}

/deep/.el-menu-item-group__title {
	background: null;
}

/deep/ .el-aside {
	overflow: visible !important;
	z-index: 10;
}

/deep/ .el-submenu__title:hover {
	color: #000;
}

// 二级子菜单的样式
.router-link-exact-active {
	display: inline-block;
	background: #00dfb9 !important;
	.el-menu-item {
		width: 100%;
		background: #00dfb9;
		color: #fff;
	}
}

/deep/ .el-badge{
	width:100%;
	height:100%;
}
.main-content {
	width: 100%;
	height: 100%;
	padding: 0 !important;
	margin-left: 280px;
}
.has-padding {
	padding: 10px !important;
}
.collapse-block {
	width: 100%;
	height: 80px;
	background: #fff;
	position: fixed;
}
</style>